<!doctype html>
<html lang="en">
<head>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKXJAfvvvOcdXy0JRNl6Eb7Ow-H81TvRc"
    ></script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!-- Bootstrap CSS Files -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <link rel="stylesheet" href="bootstrap/css/font-awesome-5.8.1.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/mdb.css">
    <link rel="stylesheet" href="bootstrap/css/style.css">
    <title>Travel </title>
    <style>
        #map{
            width: 100%;
            height: 400px;
        }
        </style>
</head>
<body>

    <!-- Main Navbar -->
    <nav class="navbar navbar-expand-sm navbar-dark bg-teal">
        <div class="container">
            <a href="index.html" class="navbar-brand">
               <i class="fa fa-plane-departure"></i> Travel Mysore</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#travel-navbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="travel-navbar">
                <ul class="navbar-nav ml-auto">
                    
                    <li class="nav-item px-3">
                        <a href="destinations.html" class="nav-link">Visiting Spots</a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="#gallery" class="nav-link">Gallery</a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="#contact" class="nav-link">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    
    
    <!-- Search Section -->
    <section id="search" class="p-3 bg-teal text-white">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h5 class="display-4">Ranganathittu Bird Sanctuary</h5>
                    <p class="lead">A God gifted piece of land on the bank of Kaveri is Ranganathittu Bird Sanctuary.</p>
                </div>
            </div>
        </div>
    </section>
    

    <!-- Popular Places -->
    <section id="places" class="p-3">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <h5 class="display-4">
                        <span class="text-teal">History</span> 
                    </h5>
                    <p class="lead">Let's get going on all the rituals, folklore and flavour behind Mysore food.</p>
                    
                    <p>The Sanctuary named after the famous Hindu God Sri Ranganatha Swamy, who is an incarnation of Lord Vishnu. The bird sanctuary span over an area of 40 acres with Kaveri River flowing through the Sanctuary.</p>
                    <p>In around 1600s, a small dam across the Kaveri River led to the formation of Ranganathittu. It was because of world-renowned ornithologist Dr. Salim Ali determination and ability to convince the then Mysore Maharaja that Ranganathittu declared as a protected area. This heavenly bird place was declared as a bird sanctuary in the year of 1940.</p>
                </div>
            </div>
            

                <div class="row text-center">
                    <div class="col">
                        <h5 class="display-4">
                            <span class="text-teal">Correct time to </span> Visit
                        </h5>
                        <p class="lead">Ranganathitt Migratory Birds</p>
                    </div>
                </div>
            <div class="row" align="center">
                
                    <div class="card mt-3">
                        <img src="images/RanganathittMigratory-Birds-1024x683.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Example of Mr. Sandeep</h3>
                            <p class="card-text">I am a morning person, which mean I leave Bangalore by 6 AM to reach my destination well in time and if it’s nearby then as early as possible. Therefore it holds true for Ranganathittu Sanctuary too; we reached the Sanctuary by 9:30 AM. We took 30 mins of breakfast break at Vatika which is on Mysore Road.</p>
                            <p class="card-text">We got ample space to park our car, roamed freely in the Sanctuary. We didn’t find any queue to get the boat tickets as well. However, we see huge crowd when we were about to leave the Sanctuary around 12 PM.</p>
                            <p class="card-text">So, the best time to visit the Ranganathittu bird sanctuary is from 9 to 11 AM. The Sanctuary is open for visitors from 8:30 AM to 5:45 PM (Monday to Sunday)</p>
                            
                        </div>
                    </div>
                
                
            </div>
                
            <div class="row text-center">
                    <div class="col">
                        <h5 class="display-4">
                            <span class="text-teal">Best Season to </span> Visit
                        </h5>
                        <p class="lead">Ranganathitt Migratory Bird</p>
                    </div>
                </div>
            <div class="row">
                
                    <div class="card mt-3">
                        <img src="images/painted-stork.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            <h3 class="card-title">Example of Mr. Sandeep</h3>
                            <p class="card-text">We feel we were lucky to visit the Ranganathittu Bird Sanctuary in January, which as per the park guard is also the best season to visit the migratory bird’s paradise.</p>
                            <p class="card-text">From June to September marks the monsoon season & another great season as these are the nesting month for the birds. However, do note that due to water rise in Kaveri River, the boating facility would not be there.</p>
                            
                            
                        </div>
                    </div>
            </div>
            
            <div class="row text-center">
                    <div class="col">
                        <h5 class="display-4">
                            <span class="text-teal">Ranganathittu Bird Sanctuary Distance from Bangalore & Mysore </span>
                        </h5>
                        
                    </div>
                </div>
            <div class="row">
                
                    <div class="card mt-3">
                        <img src="images/RanganathittSanctuary-Facilities-1200x800.jpg" class="img-fluid" alt="">
                        <div class="card-body">
                            
                            <p class="card-text">Ranganathittu Bird Sanctuary is at a distance of 19 km from historical Mysore city, and about 128 km from the garden city of Bangalore. The bird sanctuary is at a distance of just 5km from the Srirangapatna.</p>
                            
                            
                            
                        </div>
                    </div>
            </div>
            
        </div>
    </section>

    <!-- Social Icons -->
    <section class="p-3 bg-teal text-white text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Follow Mysore Tourism</h1>
                    <p>Your reviews make us strong</p>
                    <i class="fab fa-facebook-square fa-4x m-3"></i>
                    <i class="fab fa-youtube fa-4x m-3"></i>
                    <i class="fab fa-twitter fa-4x m-3"></i>
                    <i class="fab fa-instagram fa-4x m-3"></i>
                </div>
            </div>
        </div>
    </section>
    
    <section class="p-3 bg-white text-black text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>Map to follow</h1>
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section id="gallery" class="p-3">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <h5 class="display-4">
                        <span class="text-teal">Photo</span> Gallery
                    </h5>
                    <p class="lead">Some rare pics from sanctuary</p>
                </div>
            </div>
            
            <div class="row mt-4">
                <div class="col-md-3">
                    <img src="images/ranganathittu-bird-sanctuary-big.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/kokkarebellur-bird-sanctuary.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/Great-Stone-curlew-Birds-at-Ranganthittu-Bird-Sanctuary-Karnataka.jpg" class="img-fluid" alt="">
                </div>
                
            </div>
            <div class="row mt-4">
                <div class="col-md-3">
                    <img src="images/DSC_36992.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/Ranganathittu Birds-42.jpg" class="img-fluid" alt="">
                </div>
                <div class="col-md-3">
                    <img src="images/croc.JPG" class="img-fluid" alt="">
                </div>
                
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="p-3">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="card mt-3">
                        <div class="card-body bg-teal text-center text-white">
                            <i class="fa fa-envelope fa-4x"></i>
                            <h2>Contact For Bookings</h2>
                            <p>So what are you waiting for book your tickets right now for your next vacation to Mysuru? For more querries contact us !!</p>
                        </div>
                    </div>
                    
                </div>
                <div class="col-md-6">
                    <div class="card mt-3">
                        <div class="card-header bg-teal text-white text-center">
                            <h3>Contact Us</h3>
                        </div>
                        <div class="card-body bg-light">
                            <form>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Name">
                                </div>
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="number" class="form-control" placeholder="Mobile Number">
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Loved Destination">
                                </div>
                                <div class="form-group">
                                    <textarea class="form-control" rows="5" placeholder="Your Description"></textarea>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Footer -->
    <footer class="p-3 mt-3 bg-teal text-white text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3>Copyright &copy; 2020 , Travel Mysore</h3>
                    <h6>All Rights Reserved</h6>
                    <h6>Developed & Maintained by Pratik and Mukul</h6>
                </div>
            </div>
        </div>
    </footer>

<!-- lonitude, latitude - 12.42457, 76.65643 -->
<!-- Bootstrap Js files -->
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/mdb.js"></script>
<script>
    $('.carousel').carousel({
        interval : 3000,
        pause : 'hover'
    });
</script>
<script>
    var myCenter = new google.maps.LatLng(12.42457, 76.65643);
    function initialize(){
        var mapProp = {
            center:myCenter,
            zoom:12,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
    
        var map = new google.maps.Map(document.getElementById("map"),mapProp);
    
        var marker = new google.maps.Marker({
            position:myCenter,
        });
    
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
<script>(function(w, d) { w.CollectId = "5fd44966278c444f79e6977c"; var h = d.head || d.getElementsByTagName("head")[0]; var s = d.createElement("script"); s.setAttribute("type", "text/javascript"); s.async=true; s.setAttribute("src", "https://collectcdn.com/launcher.js"); h.appendChild(s); })(window, document);</script>

</body>
</html>
